<template>
  <div>
    <el-dialog title="选择付款单" :visible.sync="selectPaymentVisible">
      <el-table
              :data="curPayments"
              border
              style="width: 100%"
              @current-change="clickChange"
      >
        <el-table-column label="选择" width="55">
          <template slot-scope="scope">
            <el-radio v-model="tableRadio" :label="scope.row">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="proportion" label="占比" align="center" width="80px">
          <template slot-scope="scope"><span>{{ scope.row.proportion }}</span></template>
        </el-table-column>
        <el-table-column prop="paymentDate" label="付款日期" align="center" width="160px">
          <template slot-scope="scope"><span>{{ scope.row.paymentDate }}</span></template>
        </el-table-column>
        <el-table-column prop="paymentSituation" label="付款情况" align="center" width="150px">
          <template slot-scope="scope"><span>{{ scope.row.paymentSituation }}</span></template>
        </el-table-column>
        <el-table-column prop="paymentApprovalState" label="付款审批状态" align="center" width="150px">
          <template slot-scope="scope"><span>{{ scope.row.paymentApprovalState }}</span></template>
        </el-table-column>
        <el-table-column prop="paymentComment" label="付款备注" align="center">
          <template slot-scope="scope"><span>{{ scope.row.paymentComment }}</span></template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="selectPaymentVisible = false">取消</el-button>
        <el-button icon="el-icon-check" type="primary" @click="exportWithPayment">确定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { getFileAction, getAction } from '@/api/manage'
import { Message } from 'element-ui'

export default {
  name: '',
  components: {
  },
  props: {
  },
  data() {
    return {
      selectPaymentVisible: false,
      tableRadio: null,
      curPayments: [],
      selectCode: ''
    }
  },
  created() {
  },
  methods: {
    exportWithPayment() {
      if (this.tableRadio === null) {
        Message.error('请选择要导出的付款单')
      } else {
        this.exportPaymentOrder({ contractId: this.tableRadio.contractId, paymentId: this.tableRadio.id }, this.selectCode)
        this.selectPaymentVisible = false
      }
    },
    clickChange(item) {
      this.tableRadio = item
    },
    btnPaymentOrder(row) {
      getAction('/purchase/contract/queryPayments', { contractId: row.id }).then(res => {
        const { data } = res
        if (data !== undefined && data != null && data.length > 1) {
          // 弹出选择
          this.tableRadio = null
          this.selectPaymentVisible = true
          this.curPayments = data
          this.selectCode = row.contractCode
        } else {
          this.exportPaymentOrder({ contractId: row.id }, row.contractCode)
        }
      })
    },
    exportPaymentOrder(param, contractCode) {
      getFileAction('/purchase/contract/exportPayment', param).then(res => {
        if (res.type === 'application/json') {
          const reader = new FileReader() // 创建读取文件对象
          reader.addEventListener('loadend', function() { //
            const resJson = JSON.parse(reader.result) // 返回的数据
            Message.error(resJson.msg)
          })
          reader.readAsText(res, 'utf-8') // 设置读取的数据以及返回的数据类型为utf-8
        } else {
          const doca = window.document.createElement('a')
          const url = window.URL.createObjectURL(res)

          doca.href = url
          doca.setAttribute('download', contractCode + '.xls')
          window.document.body.appendChild(doca)
          doca.click()
          window.document.body.removeChild(doca)
          window.URL.revokeObjectURL(url)
        }
      })
    }

  }
}
</script>
